<template>
  <div class="car">
    <h1>汽车信息：一辆{{ car.brand }}车，价值{{ car.price }}万</h1>
    <button @click="changePrice">修改汽车价格</button>
    <button @click="changeCar">修改汽车</button>

    <h1>游戏列表</h1>
    <ul>
      <li v-for="(game, index) in games" :key="index">
        {{ game.id }}——{{ game.name }}
      </li>
    </ul>
    <button @click="addGame">增加游戏</button>
    <button @click="updateGame">修改游戏名称</button>
    <div>{{ obj.a.b.c }}</div>
    <button @click="changeObj">修改obj</button>
  </div>
</template>

<script lang="ts" setup name="car">
import { reactive, ref } from "vue";
// reactive 创建响应式对象，监听是深层次的
// let car = reactive({ brand: "奔驰", price: 199 });
// let games = reactive([
//   { id: "ffdsafwq01", name: "王者荣耀" },
//   { id: "ffdsafwq02", name: "元神" },
//   { id: "ffdsafwq03", name: "三国志" },
// ]);
// let obj = reactive({
//   a: {
//     b: {
//       c: 666,
//     },
//   },
// });
//使用ref定义响应式对象。底层其实就是Proxy代理实现,reactive的实现就是Proxy
let car = ref({ brand: "奔驰", price: 199 });
let games = ref([
  { id: "ffdsafwq01", name: "王者荣耀" },
  { id: "ffdsafwq02", name: "元神" },
  { id: "ffdsafwq03", name: "三国志" },
]);
let obj = ref({
  a: {
    b: {
      c: 666,
    },
  },
});
// function changePrice() {
//   car.price += 10;
// }
// function addGame() {
//   games.push({ id: "ffdsafwq04", name: "三国志2" });
// }
// function updateGame() {
//   games[2].name = "原神";
// }
// function changeObj() {
//   obj.a.b.c = 777;
// }

function changePrice() {
  car.value.price += 10;
}
function changeCar() {
  //reactive 定义的响应式对象，必须使用Object.assign赋值，才能更新页面
  //Object.assign(car, { brand: "宝马", price: 99 });
  //ref定义的响应式对象，可以直接.value=对象
  car.value = { brand: "宝马", price: 99 };
}
function addGame() {
  games.value.push({ id: "ffdsafwq04", name: "三国志2" });
}
function updateGame() {
  games.value[2].name = "原神";
}

function changeObj() {
  obj.value.a.b.c = 777;
}
</script>

<style>
.car {
  background-color: lawngreen;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>